<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #retangulo{border:1px solid;}
        </style>
    </head>
    <body>
       <canvas id="retangulo" height="400" width="600"> </canvas>
       <br/>
       <input type="button" value="Vai para a direita" onclick=" clearInterval(intervalo);vaidireita();">
       <input type="button" value="Vai para a esquerda" onclick="vaiesquerda();">
       <input type="button" value="Vai para cima" onclick="vaicima();">
       <input type="button" value="Vai para baixo" onclick="vaicima();">
                <script>
        var ctx1=document.getElementById('retangulo').getContext("2d");
        ctx1.fillStyle = 'red';
        var x;
        var y;
        var largura;
        var altura; 
		var intervalo;
		var velocidade;
		
        function inicia()
        {
            // valores iniciais das coordenadas
            x=10;
            y=10;
            altura=30;
            largura=30;
			velocidade=1000;
        desenhaobjeto (x,y);
        }
      function desenhaobjeto(x,y)
      {
        limpa();
        ctx1.fillRect(x, y, largura, altura);
      }
      
      function vaidireita()
      {
	       
         if (x<(document.getElementById('retangulo').width - largura))
             {
          x=x+5;
          desenhaobjeto(x,y);
      }
	  intervalo=setInterval(vaidireita,velocidade);
    
      }
      function vaicima()
      {
         if (y<0)
             {
          y=y-5;
          desenhaobjeto(x,y);
      }
    
      }
      function vaiesquerda()
      {
         if (x>0 )
             {
          x=x-5;
          desenhaobjeto(x,y);
      }
    
      }
      function limpa()
      {
          ctx1.clearRect(0,0,
          document.getElementById('retangulo').width,
          document.getElementById('retangulo').height);
      
      }
         inicia ();
 </script>
       
    </body>
</html>